import React from 'react'
import Slider from "react-slick";

import {Carousel} from "antd";
import {WeaTable} from "ecCom";
import prev_button from './img/prev_button.png'
import next_button from './img/next_button.png'

function SamplePrevArrow(props) {
    const {className,style,onClick,id} = props
    return (
        <img src={prev_button} className={`${className} custom-element-view-pre-arrow-${id}`} style={{...style}} onClick={onClick}
             ref={(ref)=>{
                 if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                     window.elementFollowHideDoms[id].push(ref)
                 }else if(!window.elementFollowHideDoms){
                     window.elementFollowHideDoms = {}
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }else{
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }
             }}
        />
    )
}

function SampleNextArrow(props) {
    const {className,style,onClick,id} = props
    return (
        <img src={next_button}  className={`${className} custom-element-view-next-arrow-${id}`} style={{...style}} onClick={onClick}
             ref={(ref)=>{
                 if(window.elementFollowHideDoms && window.elementFollowHideDoms[id]){
                     window.elementFollowHideDoms[id].push(ref)
                 }else if(!window.elementFollowHideDoms){
                     window.elementFollowHideDoms = {}
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }else{
                     window.elementFollowHideDoms[id] = []
                     window.elementFollowHideDoms[id].push(ref)
                 }
             }}
        />
    )
}

export default class ContainerViewExtend extends React.Component{

    hasIndex= (indexs ,index)=>{
        for(let i in indexs){
            if(indexs[i].dataIndex == index){
                return true
            }
        }
        return false
    }

    render(){
        const {data,tabId} = this.props
        const {id,items,setting,eFieldNewDataSource,style,headlinesStyles}  = data
        for(let tabId in items){
            if(items.hasOwnProperty(tabId)){
                let columns = []
                let selectColumns = []
                let list = []
                let setting = {}
                let imgs = []
                if(data.items && data.items[tabId] && data.items[tabId].setting.eFieldNewUsedKeys){
                    list = data.items[tabId].docs
                    setting = data.items[tabId].setting
                    selectColumns = data.items[tabId].setting.eFieldNewUsedKeys
                    for(let i in list){
                        list[i].icon = ''
                        if(list.hasOwnProperty(i)){
                            if(list[i].images.length ==1 && list[i].images[0] == "/images/homepage/noimgdefault_wev8.jpg"){

                            }else{
                                imgs.push({"img":list[i].images[0],"link":list[i].docsubject.link});
                            }
                        }
                    }
                    if(imgs.length == 0 && list.length > 0){
                        imgs.push({"img":"/images/homepage/noimgdefault_wev8.jpg","link":""})
                    }
                }
                {
                    style.iconEsymbol ? (
                        columns.push({"dataIndex":'icon',"key":'icon',"width":'8px',"render": (text) => <img src={style.iconEsymbol} style={{'margin-bottom':'4px'}}/>})
                    ) : null
                }
                for(let i in selectColumns){
                    if(selectColumns.hasOwnProperty(i)){
                        for(let j in eFieldNewDataSource){
                            if(eFieldNewDataSource.hasOwnProperty(j)){
                                if(selectColumns[i] == eFieldNewDataSource[j].id){
                                    if(eFieldNewDataSource[j].fieldColumn=='docsubject'){
                                        columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"width":eFieldNewDataSource[j].width,"render": (text) => {return <div title={text.name} className="font"  onClick={()=>{window.open(text.link)}}><div style={{display:'inline-block',cursor:'pointer','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','max-width':'calc(100% - 30px)','vertical-align':'middle'}}>{text.name}</div>{text.img!= ''? <img src={text.img} style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}/>:null}<div style={{display:'inline-block','width':'0px',height:'100%','vertical-align':'middle'}}></div></div>}})
                                    }else if(eFieldNewDataSource[j].fieldColumn=='doccreater'){
                                        columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"width":eFieldNewDataSource[j].width,"render": (text) => {return <div title={text.name}  className="font"  style={{'overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}}>{text.name}</div>}})
                                    }else if(eFieldNewDataSource[j].fieldColumn=='images'){
                                        continue
                                    }else{
                                        columns.push({"dataIndex":eFieldNewDataSource[j].fieldColumn,"key":eFieldNewDataSource[j].fieldColumn,"width":eFieldNewDataSource[j].width,"render": (text) => <div title={text}  className="font"  style={{'overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}}>{text}</div>})
                                    }

                                }
                            }

                        }
                    }

                }

                items[tabId].columns = columns
                items[tabId].list = list
                items[tabId].imgs = imgs
            }

        }

        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay:true,
        };

        let content = null
        let item
        if(items.length > 0 && items.find((element)=>(element.id == tabId))){
            item =items.find((element)=>(element.id == tabId))
            if(item.setting.showType == '1') {
                content = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@vbnvth`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} />
            }else if(item.setting.showType == '2'){
                content = (
                    <div>
                        <div className='data-html2canvas-ignore'  style={{width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%"),float:"left",'padding-top':'6px'}}>
                            {
                                item.imgs.length > 1 ? (
                                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@wemvmj`} {...settings}>
                                        {
                                            item.imgs.map((item2,index)=>{
                                                return (
                                                    <img style={{cursor:'pointer',width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}} onClick={()=>{if(item2.link){window.open(item2.link)}}} src={item2.img}/>
                                                )
                                            })
                                        }
                                    </Carousel>
                                ) : null
                            }
                            {
                                item.imgs.length == 1  ?  (
                                    <img style={{cursor:'pointer',width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}} onClick={()=>{if(item.imgs[0].link){window.open(item.imgs[0].link)}}} src={item.imgs[0].img}/>
                                ) : null
                            }


                        </div>
                        <div style={{'margin-left':item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),'padding':'0 8px'}}>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@bf3y9p`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.list} />
                        </div>
                    </div>
                )
            }else if(item.setting.showType == '3'){
                content = (
                    item.docs.map((item2,index)=>{
                        return (
                            <div style={{overflow:'hidden','margin-bottom':'10px'}}>
                                <div style={{
                                    width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                    float: "left"
                                }} className='data-html2canvas-ignore'>

                                    {
                                        item2.images.length > 1 ? (
                                            <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@4t1qw7@${item2.id}`} {...settings}>
                                                {
                                                    item2.images.map((item3, index) => {
                                                        return (
                                                            <img style={{
                                                                cursor:'pointer',
                                                                width: '100%',
                                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                            }} onClick={() => {
                                                                window.open(item2.docsubject.link)
                                                            }} src={item3}/>
                                                        )
                                                    })
                                                }
                                            </Carousel>
                                        ) : null
                                    }
                                    {

                                        item2.images.length ==  1 ? (
                                            <img style={{
                                                cursor:'pointer',
                                                width: '100%',
                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                            }} onClick={() => {
                                                window.open(item2.docsubject.link)
                                            }} src={item2.images[0]}/>
                                        ): null
                                    }


                                </div>
                                <div style={{'margin-left': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%"),'padding-left':'3px'}}>
                                    {
                                        this.hasIndex(item.columns,"docsubject") ?
                                            <div style={{'margin': '10px 10px 10px 0px'}}>
                                                <span title={item2.docsubject.name} className='font' style={{cursor:'pointer','color': 'rgb(51, 51, 51)',display:'inline-block','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','vertical-align':'middle'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}{item2.docsubject.img!= ''? <img src={item2.docsubject.img} style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}/>:null}<div style={{display:'inline-block','width':'0px',height:'100%','vertical-align':'middle'}}></div></span>
                                            </div>
                                            :""
                                    }
                                    {
                                        this.hasIndex(item.columns,"summary") ? (
                                            <div style={{marginBottom:'10px'}}>
                                                <span style={{width: '99%','max-height': '40px', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: '2',WebkitBoxOrient: 'vertical', display: '-webkit-box',  marginBottom: '10px'}}>{item2.summary}</span>
                                            </div>
                                        ) : null
                                    }
                                    <div style={{margin: '10px 0px 10px 0px'}}>
                                        <div style={{float:'left'}}>
                                            {
                                                this.hasIndex(item.columns,"doccreater") ?

                                                    <span className='font'  style={{display: 'inline-block',width: 'calc(100% - 134px)', overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap','margin-right':'10px'}}>{item2.doccreater.name}</span>
                                                    :""
                                            }
                                        </div>
                                        <div style={{float:'right'}}>
                                            {
                                                this.hasIndex(item.columns,"doccreatedate") ?
                                                    <span className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doccreatedate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"doccreatetime") ?
                                                    <span  className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doccreatetime}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"doclastmoddate") ?
                                                    <span className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doclastmoddate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"doclastmodtime") ?
                                                    <span className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doclastmodtime}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docpubdate") ?
                                                    <span className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docpubdate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docpubtime") ?
                                                    <span  className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docpubtime}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docapprovedate") ?
                                                    <span className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docapprovedate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docapprovetime") ?
                                                    <span className='font' style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docapprovetime}</span>
                                                    :""
                                            }
                                        </div>

                                    </div>

                                </div>
                            </div>
                        )
                    })
                )
            }else if(item.setting.showType == '4'){
                content = (
                    item.docs.map((item2,index)=>{
                        return (
                            <div style={{overflow:'hidden','margin-bottom':'10px'}}>
                                <div style={{
                                    width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                    margin: '0 auto',
                                }} className='data-html2canvas-ignore'>

                                    {
                                        item2.images.length > 1 ? (
                                            <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@9tnclt@${item2.id}`} {...settings}>
                                                {
                                                    item2.images.map((item3, index) => {
                                                        return (
                                                            <img style={{
                                                                cursor:'pointer',
                                                                width: '100%',
                                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                            }} onClick={() => {
                                                                window.open(item2.docsubject.link)
                                                            }} src={item3}/>
                                                        )
                                                    })
                                                }
                                            </Carousel>
                                        ) : null
                                    }
                                    {

                                        item2.images.length ==  1 ? (
                                            <img style={{
                                                cursor:'pointer',
                                                width: '100%',
                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                            }} onClick={() => {
                                                window.open(item2.docsubject.link)
                                            }} src={item2.images[0]}/>
                                        ): null
                                    }


                                </div>
                                <div style={{'width': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%"),'margin':'auto'}}>
                                    {
                                        this.hasIndex(item.columns,"docsubject") ?
                                            <div style={{'margin': '10px 10px 10px 0px'}}>
                                                <span title={item2.docsubject.name} className='font' style={{cursor:'pointer',color: 'rgb(51, 51, 51)',display:'inline-block','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','vertical-align':'middle'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}{item2.docsubject.img!= ''? <img src={item2.docsubject.img} style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}/>:null}<div style={{display:'inline-block','width':'0px',height:'100%','vertical-align':'middle'}}></div></span>
                                            </div>
                                            :""
                                    }
                                    {
                                        this.hasIndex(item.columns,"summary") ? (
                                            <div style={{marginBottom:'10px'}}>
                                                <span style={{width: '99%', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: '2',WebkitBoxOrient: 'vertical', display: '-webkit-box',  marginBottom: '10px','max-height':'40px'}}>{item2.summary}</span>
                                            </div>
                                        ) : null
                                    }
                                    <div style={{margin: '10px 0px 10px 0px'}}>
                                        <div style={{float:'left'}}>
                                            {
                                                this.hasIndex(item.columns,"doccreater") ?

                                                    <span className="font" style={{display: 'inline-block',width: 'calc(100% - 134px)', overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap','margin-right':'10px','color':'rgb(153, 153, 153)'}}>{item2.doccreater.name}</span>
                                                    :""
                                            }
                                        </div>
                                        <div style={{float:'right'}}>
                                            {
                                                this.hasIndex(item.columns,"doccreatedate") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doccreatedate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"doccreatetime") ?
                                                    <span  className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doccreatetime}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"doclastmoddate") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doclastmoddate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"doclastmodtime") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doclastmodtime}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docpubdate") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docpubdate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docpubtime") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docpubtime}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docapprovedate") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docapprovedate}</span>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"docapprovetime") ?
                                                    <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docapprovetime}</span>
                                                    :""
                                            }
                                        </div>

                                    </div>

                                </div>
                            </div>
                        )
                    })
                )
            }else if(item.setting.showType == '5'){
                let headlinesStyle = headlinesStyles.filter((headlinesStylesItem)=>{
                    return headlinesStylesItem.id == item.setting.headlinesStyleId ? item.setting.headlinesStyleId : '1'
                })
                if(headlinesStyle.length > 0){
                    headlinesStyle = headlinesStyle[0]
                }
                content = (
                    <div style={{overflow:'hidden','margin-bottom':'10px'}}>
                        {
                            item.docs.length > 0 ? (
                                <div style={{
                                    width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                    margin: '0 auto',
                                }} className='data-html2canvas-ignore'>

                                    {
                                        item.docs[0].images.length > 1 ? (
                                            <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@lkmsg1`} {...settings}>
                                                {
                                                    item.docs[0].images.map((item3, index) => {
                                                        return (
                                                            <img style={{
                                                                cursor:'pointer',
                                                                width: '100%',
                                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                            }} onClick={() => {
                                                                window.open(item.docs[0].docsubject.link)
                                                            }} src={item3}/>
                                                        )
                                                    })
                                                }
                                            </Carousel>
                                        ) : null
                                    }
                                    {

                                        item.docs[0].images.length ==  1 ? (
                                            <img style={{
                                                cursor:'pointer',
                                                width: '100%',
                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                            }} onClick={() => {
                                                window.open(item.docs[0].docsubject.link)
                                            }} src={item.docs[0].images[0]}/>
                                        ): null
                                    }
                                    <div className='showType5-headlines'>
                                        <div className='showType5-headlines-name'
                                             onClick={() => {
                                                 window.open(item.docs[0].docsubject.link)
                                             }}
                                             style={{'font-size':headlinesStyle.titleSize+'px','font-family':headlinesStyle.titleFont,'font-weight':headlinesStyle.titleWeight == '1' ? 'bold' : 'normal','font-style':headlinesStyle.titlestyle == '1' ? "italic" : "normal",color:headlinesStyle.titleColor}}
                                        >
                                            {item.docs[0].docsubject.name}
                                        </div>
                                        <div className='showType5-headlines-desc' style={{'-webkit-box-orient': 'vertical','font-size':headlinesStyle.abstractSize+'px','font-family':headlinesStyle.abstractFont,'font-weight':headlinesStyle.abstractWeight == '1' ? 'bold' : 'normal','font-style':headlinesStyle.abstractStyle == '1' ? "italic" : "normal",color:headlinesStyle.abstractColor}}>
                                            {item.docs[0].summary}
                                        </div>
                                    </div>
                                </div>
                            ) : null
                        }

                        <div style={{'width': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%"),'margin':'auto','padding-left':'10px'}}>

                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ocwkir`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.list.slice(1)} />

                        </div>
                    </div>
                )
            }else if(item.setting.showType == '6'){
                let slidesToShow
                let containerWidth = $(".news-viewExtend").width()
                if(item.setting.imgWidthTyp == '1'){
                    slidesToShow = containerWidth/item.setting.imgWidth
                }else{
                    slidesToShow = 100 / item.setting.imgWidth
                }
                containerWidth
                const silderSettings = {
                    dots: false,
                    infinite: true,
                    pauseOnHover: true,
                    speed: 500,
                    slidesToShow: slidesToShow,
                    slidesToScroll: 1,
                    prevArrow : <SamplePrevArrow ecId={`${this && this.props && this.props.ecId || ''}_SamplePrevArrow@r3c4b9`} id={id}/>,
                    nextArrow : <SampleNextArrow ecId={`${this && this.props && this.props.ecId || ''}_SampleNextArrow@zjc4kr`} id={id}/>
                };
                content =  (
                    <Slider ecId={`${this && this.props && this.props.ecId || ''}_Slider@eb2dum`} {...silderSettings}>
                        {
                            item.docs.map((item2,index)=>{
                                return (
                                    <div style={{overflow:'hidden','margin-bottom':'10px'}}>
                                        <div style={{
                                            width: (item.setting.imgWidthType == 1 ? item.setting.imgWidth+"px" : "90%"),
                                            margin: '0 auto',
                                        }} className='data-html2canvas-ignore'>

                                            {
                                                item2.images.length > 1 ? (
                                                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@ufz8he@${item2.id}`} {...settings}>
                                                        {
                                                            item2.images.map((item3, index) => {
                                                                return (
                                                                    <img style={{
                                                                        cursor:'pointer',
                                                                        width: '100%',
                                                                        height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                                    }} onClick={() => {
                                                                        window.open(item2.docsubject.link)
                                                                    }} src={item3}/>
                                                                )
                                                            })
                                                        }
                                                    </Carousel>
                                                ) : null
                                            }
                                            {

                                                item2.images.length ==  1 ? (
                                                    <img style={{
                                                        cursor:'pointer',
                                                        width: '100%',
                                                        height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                    }} onClick={() => {
                                                        window.open(item2.docsubject.link)
                                                    }} src={item2.images[0]}/>
                                                ): null
                                            }


                                        </div>
                                        <div style={{width: (item.setting.imgWidthType == 1 ? item.setting.imgWidth+"px" : "90%"),'margin':'auto'}}>
                                            {
                                                this.hasIndex(item.columns,"docsubject") ?
                                                    <div style={{'margin': '10px 10px 10px 0px'}}>
                                                        <span title={item2.docsubject.name} className='font' style={{cursor:'pointer',color: 'rgb(51, 51, 51)',display:'inline-block','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','vertical-align':'middle'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}{item2.docsubject.img!= ''? <img src={item2.docsubject.img} style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}/>:null}<div style={{display:'inline-block','width':'0px',height:'100%','vertical-align':'middle'}}></div></span>
                                                    </div>
                                                    :""
                                            }
                                            {
                                                this.hasIndex(item.columns,"summary") ? (
                                                    <div style={{marginBottom:'10px'}}>
                                                        <span style={{width: '99%', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: '2',WebkitBoxOrient: 'vertical', display: '-webkit-box',  marginBottom: '10px','max-height':'40px'}}>{item2.summary}</span>
                                                    </div>
                                                ) : null
                                            }
                                            <div style={{margin: '10px 0px 10px 0px'}}>
                                                <div style={{float:'left'}}>
                                                    {
                                                        this.hasIndex(item.columns,"doccreater") ?

                                                            <span className="font" style={{display: 'inline-block',width: 'calc(100% - 134px)', overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap','margin-right':'10px','color':'rgb(153, 153, 153)'}}>{item2.doccreater.name}</span>
                                                            :""
                                                    }
                                                </div>
                                                <div style={{float:'right'}}>
                                                    {
                                                        this.hasIndex(item.columns,"doccreatedate") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doccreatedate}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"doccreatetime") ?
                                                            <span  className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doccreatetime}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"doclastmoddate") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doclastmoddate}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"doclastmodtime") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.doclastmodtime}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"docpubdate") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docpubdate}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"docpubtime") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docpubtime}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"docapprovedate") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docapprovedate}</span>
                                                            :""
                                                    }
                                                    {
                                                        this.hasIndex(item.columns,"docapprovetime") ?
                                                            <span className="font" style={{ paddingLeft: '5px', color: 'rgb(153, 153, 153)', letterSpacing: '-0.08px'}}>{item2.docapprovetime}</span>
                                                            :""
                                                    }
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                )
                            })
                        }
                    </Slider>
                )
            }else if(item.setting.showType == '7'){
                content = (
                    item.docs.map((item2,index)=>{
                        return (
                            <div style={{overflow:'hidden','margin-bottom':'10px','border-bottom': '1px solid rgb(222, 222, 222)'}}>
                                <div style={{
                                    width: item.setting.imgWidth + (item.setting.imgWidthType == 1 ? "px" : "%"),
                                    float: "left"
                                }} className='data-html2canvas-ignore'>

                                    {
                                        item2.images.length > 1 ? (
                                            <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@dytysf@${item2.id}`} {...settings}>
                                                {
                                                    item2.images.map((item3, index) => {
                                                        return (
                                                            <img style={{
                                                                cursor:'pointer',
                                                                width: '100%',
                                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                                            }} onClick={() => {
                                                                window.open(item2.docsubject.link)
                                                            }} src={item3}/>
                                                        )
                                                    })
                                                }
                                            </Carousel>
                                        ) : null
                                    }
                                    {

                                        item2.images.length ==  1 ? (
                                            <img style={{
                                                cursor:'pointer',
                                                width: '100%',
                                                height: (item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))
                                            }} onClick={() => {
                                                window.open(item2.docsubject.link)
                                            }} src={item2.images[0]}/>
                                        ): null
                                    }


                                </div>
                                <div style={{'margin-left': item.setting.imgWidth+ (item.setting.imgWidthType == 1 ? "px" : "%"),'padding-left':'3px'}}>
                                    {
                                        this.hasIndex(item.columns,"docsubject") ?
                                            <div style={{'margin': '10px 10px 10px 0px'}}>
                                                <span title={item2.docsubject.name} className="font" style={{cursor:'pointer',color: 'rgb(102, 102, 102)',display:'inline-block','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','vertical-align':'middle'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}{item2.docsubject.img!= ''? <img src={item2.docsubject.img} style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}/>:null}<div style={{display:'inline-block','width':'0px',height:'100%','vertical-align':'middle'}}></div></span>
                                            </div>
                                            :""
                                    }
                                    {
                                        this.hasIndex(item.columns,"summary") ? (
                                            <div style={{marginBottom:'10px'}}>
                                                <span style={{width: '99%', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: '2',WebkitBoxOrient: 'vertical', display: '-webkit-box',  marginBottom: '10px','line-height':'30px','height':'60px',color: 'rgb(105, 104, 104)'}}>{item2.summary}</span>
                                            </div>
                                        ) : null
                                    }


                                </div>
                            </div>
                        )
                    })
                )
            }else if(item.setting.showType == '8'){
                content = (
                    <div>
                        <div className='data-html2canvas-ignore'  style={{width:item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),height:item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%"),float:"left",'padding-top':'6px'}}>
                            {
                                item.imgs.length > 1 ? (
                                    <Carousel ecId={`${this && this.props && this.props.ecId || ''}_Carousel@ox47rb`} {...settings}>
                                        {
                                            item.imgs.map((item2,index)=>{
                                                return (
                                                    <img style={{
                                                        cursor:'pointer',
                                                        width: '100%',
                                                        height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}}
                                                        onClick={()=>{if(item2.link){window.open(item2.link)}}} src={item2.img}/>
                                                )
                                            })
                                        }
                                    </Carousel>
                                ) : null
                            }
                            {
                                item.imgs.length == 1  ?  (
                                    <img style={{
                                        cursor:'pointer',
                                        width: '100%',
                                        height:(item.setting.autoHeight==0?(item.setting.imgHeight+(item.setting.imgHeightType==1 ? "px":"%")):("auto"))}}
                                         onClick={()=>{if(item.imgs[0].link){window.open(item.imgs[0].link)}}} src={item.imgs[0].img}/>
                                ) : null
                            }


                        </div>
                        <div  style={{'margin-left':item.setting.imgWidth+(item.setting.imgWidthType==1 ? "px":"%"),'padding':'0 8px'}}>
                            {
                                item.docs.map((item2,index)=>{
                                    return (
                                        <div style={{overflow:'hidden','margin-bottom':'10px','border-bottom': '1px solid rgb(222, 222, 222)'}}>
                                            <div>
                                                {
                                                    this.hasIndex(item.columns,"docsubject") ?
                                                        <div style={{'margin': '10px 10px 10px 0px'}}>
                                                            <span title={item2.docsubject.name} className="font" style={{cursor:'pointer',color: 'rgb(102, 102, 102)',display:'inline-block','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap','vertical-align':'middle'}} onClick={()=>{window.open(item2.docsubject.link)}}>{item2.docsubject.name}{item2.docsubject.img!= ''? <img src={item2.docsubject.img} style={{display:'inline-block','vertical-align':'middle','margin-left':'5px'}}/>:null}<div style={{display:'inline-block','width':'0px',height:'100%','vertical-align':'middle'}}></div></span>
                                                        </div>
                                                        :""
                                                }
                                                {
                                                    this.hasIndex(item.columns,"summary") ? (
                                                        <div style={{marginBottom:'10px'}}>
                                                            <span style={{width: '99%', overflow: 'hidden', textOverflow: 'ellipsis', WebkitLineClamp: '2',WebkitBoxOrient: 'vertical', display: '-webkit-box',  marginBottom: '10px','line-height':'30px','height':'60px',color: 'rgb(105, 104, 104)'}}>{item2.summary}</span>
                                                        </div>
                                                    ) : null
                                                }


                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>

                    </div>

                )
            }

        }

        return (
            <div style={{height:'100%'}} className="news-viewExtend">
                {content}
            </div>
        )
    }
}